<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">

<title th:text=${title}></title>

<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">

<style type="text/css">
.select-list ul li{
	list-style-type: none;
	float: left;
}
.timeBut{
    float: left;
    padding-top: 15px
}
.timeBut2{
    float: left;
    padding-top: 10px
}
</style>

</head>

<body id="listbody">

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">
        <!-- 内容 -->
        <div class="content-wrap">
            <!-- 结束内容 -->
            <div class="row">
                <div class="col-sm-12">
                    <!-- 搜索条件 -->

                    <div class="nest" id="inlineClose">
                        <div class="title-alt">
                            <h6 style="color:black;"><b>调用量分布不包含已经变热的数据</b></h6>
                            <div class="titleClose">
                                <a class="gone" href="#inlineClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#search_div">
                                    <span class="entypo-down-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="search_div"  style="display: block">
                            <div class="form_left">
                                <form role="form" class="form-inline" id="counterDistribution_searchForm">
                                    <div class="form-group">
                                        <label class="control-label timeBut2" >所属APP：</label>
                                        <select name="appName" id="apps"  onchange="appNameChanged()" class="form-control">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label timeBut2" >规则key：</label>
                                        <select name="ruleKey" id="rule" class="form-control">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label timeBut" >开始时间：</label>
                                        <div class='input-group date datetimepicker' id='datetimepicker1' style="max-width: 220px" data-date-format="yyyy-mm-dd hh">
                                            <input type='text' class="form-control" name="time"/>
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <button onclick="showLineChart()"  data-toggle='tooltip' title="仅支持查询该小时" class="btn btn-success" type="button"><i class="fa fa-search"></i>&nbsp;搜索</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- END搜索条件 -->
                    <!-- 空白页开始-->
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
							<div id="counterDistribution_lineChart"><center>暂无数据</center></div>
                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->
            </div>
            <!-- 结束内容 -->
        </div>
    </div>
</div>
<!-- 结束右边内容 -->

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">
   
</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>

<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/highcharts/highcharts.js}" type="text/javascript"></script>
<!-- 自定义 js -->
<script th:src="@{/static/admin/common/js/lineChart.js}" type="text/javascript"></script>

<script type="text/javascript">
var first = true;
$(function(){
   $('.datetimepicker').datetimepicker({
        language: 'zh-CN',
        CustomFormat: 'yyyy-mm-dd HH',
        weekStart: 1,
        todayBtn: 1,            //显示当天按钮，点击则选择当天当天时间
        autoclose: 1,           //选完时间自动关闭
        todayHighlight: 1,      //当天时间高亮
        startView: 2,           //从月视图开始，选天
        minView: 1,             //提供选择分钟的视图
        forceParse: 0,
        startDate: new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000),
        endDate: new Date(),
        minuteStep: 5           //用于构建小时视图。就是最小的视图是每1分钟可选一次。是以分钟为单位的
    });
    $("#datetimepicker1").datetimepicker("setDate", new Date(new Date().getTime() - 5 * 60 * 1000));

    $.ajax({
        cache : true,
        type : "POST",
        url : "/user/info",
        async : false,
        error : function(XMLHttpRequest){
            $.modal.alertError(XMLHttpRequest.responseJSON.msg);
        },
        success : function(data) {
            var apps = data.appNames;
            for (var i = 0; i < apps.length; i++) {
                $("#apps").append("<option>" + apps[i] + "</option>");
            }
            appNameChanged();
        }
    });
})

// 下拉框联动
function appNameChanged() {
    var appName = $('#apps option:selected').val();
    $.getJSON('/rule/appRules?appName='+appName, function (data) {
        $("#rule").empty();
        for (var i = 0; i < data.length; i++) {
            var keyRule = data[i];
            $("#rule").append("<option>" + keyRule.key + "</option>");
        }
        if(first){
        	first = false;
        	showLineChart();
        }
    });
}

function showLineChart(){
	drawLineChart('counterDistribution', function chartToolTip(chart){
		if(!chart){
			return;
		}
		// 使用grafana click效果
		grafanaClick(chart);
		chart.tooltip = {
				formatter: function () {
					var s = '';
					s += "<table style='background-color:white;' border=1><thead><tr>";
					s += "<td rowspan=2>"+this.x+"</td>";
					s += "<td rowspan=2>key数量</td><td rowspan=2>调用量占比</td><td colspan=3>生存时间(秒)</td></tr><tr><td>最小</td><td>平均</td><td>最大</td></tr></thead><tbody>";
					$.each(this.points, function (idx) {
						if (typeof(this.point.options.r) == "undefined"){
							return;
						}
						s += "<tr>";
						s += "<td><font color='"+this.series.color+"'>" + this.series.name + "</font></td>";
						s += "<td>";
						s += this.point.y;
						s += "</td>";
						s += "<td>";
						s += new Number(this.point.options.r).toFixed(2);
						s += "%</td>";
						s += "<td>";
						s += this.point.options.mit;
						s += "</td>";
						s += "<td>";
						s += this.point.options.t;
						s += "</td>";
						s += "<td>";
						s += this.point.options.mxt;
						s += "</td>";
						s += "</tr>";
					});
					s += "</tbody></table>";
					return s;
				},
				backgroundColor: '#FFF',
				useHTML: true,
				shared: true
			};
	});
}
$("[data-toggle='tooltip']").tooltip({container: 'body'});
</script>

</body>

</html>